<template>
  <view class="definite">
    <u-navbar
      :is-back="true"
      title="会员升级"
      back-text=""
    >
    </u-navbar>
    <view
      class="item-content"
      @click="goDetailedM(item)"
      v-for="(item, index) in showDatas"
      :key="index"
    >
      <view class="image">
        <image style="width: 3.5rem; height: 3.5rem" :src="item.image" alt="" />
      </view>

      <view
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;
        "
      >
        <view class="item">
          <view style="display: flex; align-items: center">
            <view class="item-one" style="padding: 0rem 1rem">{{
              item.roleName
            }}</view>
            <view class="item-two">¥{{ item.price }}.00</view>
          </view>
          <view class="item-three">
            {{ item.des }}
          </view>
        </view>

        <view @click="upgradeM(item)" class="button">会员升级</view>
      </view>
    </view>

    <u-popup v-model="show" mode="bottom">
      <view class="modelPP">
        <view class="modelP">
          <view style="text-align: center">
            <view style="padding: 0rem 0.5rem 0.5rem 0.5rem">支付方式</view>
          </view>

          <view class="item-one">
            <view class="item-one-left">
              <image
                style="width: 1rem; height: 1rem"
                class="one-image"
                src="../../../style/image/order/yue.png"
                alt=""
              />
              <view style="padding-left: 1.8rem">余额支付(¥{{ blance }})</view>
            </view>
            <image
              @click="selectPriceM(1)"
              v-if="selectPay == 1"
              class="two-image"
              src="../../../style/image/cargo/selectRound.png"
              alt=""
            />
            <image
              v-else
              @click="selectPriceM(1)"
              class="two-image"
              src="../../../style/image/cargo/round.png"
              alt=""
            />
          </view>

          <!-- <view class="item-one">
            <view class="item-one-left">
              <image
                style="width: 1rem; height: 1rem"
                class="three-image"
                src="../../../style/image/order/C2.png"
                alt=""
              />
              <view style="padding-left: 1.8rem">微信支付</view>
            </view>

            <image
              v-if="selectPay==2"
              class="two-image"
                @click="selectPriceM(2)"
              src="../../../style/image/cargo/selectRound.png"
            
              alt=""
            />
            <image
            v-else
              @click="selectPriceM(2)"
              class="two-image"
                src="../../../style/image/cargo/round.png"
              alt=""
            />
          </view> -->

          <view class="item-one">
            <view class="item-one-left">
              <image
                style="width: 1rem; height: 1rem"
                class="three-image"
                src="../../../style/image/order/apily.png"
                alt=""
              />
              <view style="padding-left: 1.8rem">支付宝支付</view>
            </view>

            <image
              v-if="selectPay == 3"
              class="two-image"
              @click="selectPriceM(3)"
              src="../../../style/image/cargo/selectRound.png"
              alt=""
            />
            <image
              v-else
              class="two-image"
              @click="selectPriceM(3)"
              src="../../../style/image/cargo/round.png"
              alt=""
            />
          </view>
        </view>

        <view class="HR"></view>

        <view>
          <view class="footP">
            <view
              @click="addPosM"
              style="
                height: 2.5rem;
                line-height: 2.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
              "
            >
              <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
              <view
                style="
                  margin-left: 0.2rem;
                  display: flex;
                  align-items: center;
                  opacity: 0;
                "
              >
                <image
                  style="width: 1rem; height: 1rem"
                  src="../../../style/image/cargo/selectRound.png"
                  alt=""
                />
                <view
                  style="
                    font-size: 0.7rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #666666;
                    margin-left: 0.5rem;
                  "
                >
                  全选
                </view>
              </view>

              <view class="foot-right" style="margin-right: 0rem">
                <view
                  style="
                    font-size: 0.73rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                  "
                >
                  需支付:<span style="color: red">¥{{ selectPrice *payMonth }}</span>
                </view>
                <view @click="submitM" class="settle">去支付</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import {
  findRoleList,
  findUserMoney,
  saveRoleOrder,
  aliPay,
  saveOrderByBalance,
  payRoleByBalance,
  orderDetailsByOrderNo,
  saveRoleOrderByH5,
} from "../../../utils/uniApi";

import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue";

import uPopup from "../../../uview-ui/components/u-popup/u-popup.vue";
import { AppModule } from "../../../store/modules/app";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components: {
    "u-navbar": uNavbar,
    "u-popup": uPopup,
  },
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public show = false;

  public blance = "";

  public selectPay = 1;

  public selectPrice = ""; //选中的价格
  
  public payMonth = ""; // 月份

  public roleId = "";

  public showDatas = [
    // {
    //    roleName:'一级会员',
    //    price:'1250',
    //    des:'首次免费',
    //    image:require('../../../style/image/share/share1.jpg')
    // },
    //  {
    //    roleName:'一级会员',
    //    price:'1250',
    //    des:'首次免费领取电宝底座5台，续费则继续领取取电宝底座5',
    //    image:require('../../../style/image/share/share1.jpg')
    // },
    // {
    //    roleName:'一级会员',
    //    price:'1250',
    //    des:'首次免费领取电宝底座5台，续费则继续领取取电宝底座5',
    //    image:require('../../../style/image/share/share1.jpg')
    // },
    // {
    //    roleName:'一级会员',
    //    price:'1250',
    //    des:'首次免费领取电宝底座5台，续费则继续领取取电宝底座5',
    //    image:require('../../../style/image/share/share1.jpg')
    // },
  ];
  created() {}

  mounted() {
  
    uni.showLoading({
      title: "加载中",
    });
    this.findUserMoneyM();

    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
    };

    findRoleList(params).then((res: any) => {
      this.showDatas = res.data.data;
      console.log("会员列表", res);
      uni.hideLoading();
    });
  }

  findUserMoneyM() {
    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
      type: "0", //ID类型（0 代理 ,1 商户,））
    };
    findUserMoney(params).then((res: any) => {
      console.log("12321", res);

      this.blance = res.data.data.blance;
    });
  }

  selectPriceM(data: number) {
    this.selectPay = data;
  }
  
  // BackM() {
  //   uni.navigateTo({
  //     url: "../../home/home",
  //   });
  // }

  addPosM() {}

  goDetailedM(data: any) {
    console.log("123321321", data);
  }

  upgradeM(data: any) {
	this.payMonth=data.payMonth
    this.selectPrice = data.price;
    this.roleId = data.id;
    this.show = !this.show;
  }

  submitM() {
    // public selectPrice=''  //选中的价格
    console.log(this.selectPay, this.selectPrice);

    if (this.selectPay == 3) {

      var phone = uni.getStorageSync("otherData").phone; //截取后4位
      var phoneS = phone.substring(phone.length - 4);
      console.log(phoneS, "phoneS");
      var timestamp = "O" + new Date().getTime() + phoneS.toString();

      uni.setStorage({
        key: "timestamp",
        data: timestamp,
        success: function () {
          setTimeout(() => {
            console.log(uni.getStorageSync("timestamp"), "99999998888888");
          }, 600);
        },
      });

      let params = {
        userId:
          uni.getStorageSync("userId") == ""
            ? ""
            : parseInt(uni.getStorageSync("userId")),
        roleId: this.roleId, //购买的会员ID
        orderNo: timestamp,
      };

    console.log('params',params)

      // saveRoleOrderByH5(params).then((res: any) => {
      saveRoleOrder(params).then((res: any) => {
        console.log("保存会员购买订单", res);

        if (res.data.data == "success") {
          // http://cdb.lianmengxiton.cn//app/posOrder/aliPay?userId=1&orderNo=O16052474640641557

          // console.log( `http://cdb.lianmengxiton.cn/app/posOrder/aliPay?userId=${uni.getStorageSync("userId")}&orderNo=${timestamp}` )

          // window.location.href = `http://cdb.lianmengxiton.cn/app/posOrder/aliPay?userId=${uni.getStorageSync("userId")}&orderNo=${uni.getStorageSync("timestamp")}`

          console.log("进入");

          let data=`http://cdb.lianmengxiton.cn/app/posOrder/aliPay?userId=${uni.getStorageSync("userId")}&orderNo=${uni.getStorageSync("timestamp")}`


          uni.redirectTo({
            url: `./link?data=${data}`,
          });

          AppModule.orderLinkAction(data)

          //  uni.navigateTo({
          //                 url: `http://cdb.lianmengxiton.cn/app/posOrder/aliPay?userId=${uni.getStorageSync( "userId")}&orderNo=${uni.getStorageSync("timestamp")}`,
          //                 success: res => {},
          //                 fail: () => {},
          //                 complete: () => {}
          //             });

          // plus.runtime.openURL(
          //   `http://cdb.lianmengxiton.cn/app/posOrder/aliPay?userId=${uni.getStorageSync(
          //     "userId"
          //   )}&orderNo=${uni.getStorageSync("timestamp")}`
          // );

          // this.show = !this.show;

          // let parmas={
          // orderNo:timestamp,
          // userId:uni.getStorageSync("userId") == ""
          //   ? ""
          //   : parseInt(uni.getStorageSync("userId")),
          // }
          // orderDetailsByOrderNo(parmas).then((res:any)=>{
          //       console.log(res,'resresresres')

          //        uni.requestPayment({
          //     provider: 'alipay',
          //     orderInfo:res.data.data,
          //     success: function(res) {
          //         console.log('success:' + JSON.stringify(res));
          //         // pages/item/myOrder/order
          //     },
          //     fail: function(err) {
          //         console.log('fail:' + JSON.stringify(err));
          //     }
          // });
          // })

          //     uni.navigateTo({
          //                     url: `http://cdb.lianmengxiton.cn/app/posOrder/aliPay?userId=${uni.getStorageSync("userId")}&orderNo=${uni.getStorageSync("timestamp")}`,
          //                     success: res => {},
          //                     fail: () => {},
          //                     complete: () => {}
          //                 });

          // uni.navigateTo({
          //             url: `http://cdb.lianmengxiton.cn/app/posOrder/aliPay?userId=${uni.getStorageSync(
          //               "userId"
          //             )}&orderNo=${timestamp}`,
          //           });
        } // 不是成功

        // uni.requestPayment({
        //         provider: 'alipay',
        //         orderInfo:'',
        //         success: function(res) {
        //             console.log('success:' + JSON.stringify(res));
        //         },
        //         fail: function(err) {
        //             console.log('fail:' + JSON.stringify(err));
        //         }
        //     });
      });

      // console.log(uni.getStorageSync("otherData").phone  )
      // var phone=uni.getStorageSync("otherData").phone ;//截取后4位
      //   var phoneS= phone.substring(phone.length-4)
      // console.log(phone)

      //  var timestamp = 'O'+new Date().getTime()+phoneS.toString()

      //  console.log(timestamp,'timestamp')

      // let params={
      //   	userId: uni.getStorageSync("userId") == ""
      //     ? ""
      //     : parseInt(uni.getStorageSync("userId")),
      //  orderNo:timestamp  //要支付的订单号

      // }

      //   aliPay(params).then((res:any)=>{
      //       console.log('reszhifu支付',res)
      //   })
    } else if (this.selectPay == 1) {
      console.log("余额额额");

      var phone = uni.getStorageSync("otherData").phone; //截取后4位
      var phoneS = phone.substring(phone.length - 4);
      console.log(phoneS, "phoneS");
      var timestamp = "O" + new Date().getTime() + phoneS.toString();

      uni.setStorage({
        key: "timestamp",
        data: timestamp,
        success: function () {
          setTimeout(() => {
            console.log(uni.getStorageSync("account"), "999999999");
          }, 600);
        },
      });

      let paramss = {
        userId:
          uni.getStorageSync("userId") == ""
            ? ""
            : parseInt(uni.getStorageSync("userId")),
        roleId: this.roleId, //购买的会员ID
        orderNo: timestamp,
      };

      payRoleByBalance(paramss).then((res: any) => {
        console.log("yuer余热", res);

        if (res.data.data == "success") {
          uni.showToast({
            title: "购买成功",
            icon: "none",
            duration: 2000,
          });
        }
      });
    }
  }
}
</script>

<style  lang="scss"  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100vh;
}
uni-page-body {
  height: 100%;
}

.item-content {
  display: flex;
  align-items: center;
  padding: 0.7rem 0 0.7rem 0.7rem;
  // height: 3.6rem;
  // background: #ffffff;
  // font-family: PingFang SC;
  // margin-bottom: 0.03rem;
  // position: relative;
  border-bottom: 0.03rem #e5e5e5 solid;
}

// .image image {
//   width: 3.23rem;
//   height: 3.23rem;
// }
// .item {
//   float: left;
//   padding-left: 0.7rem;
//   line-height: 1.6rem;
// }
// .item-one {
//   padding-right: 1rem;
//   font-size: 0.75rem;
//   font-family: PingFang SC;
//   font-weight: 500;
//   color: #1a1a1a;
// }
// .item-two {
//   font-size: 0.65rem;
//   font-family: PingFang SC;
//   font-weight: 400;
//   color: #ff0000;
//   line-height: 0.93rem;
// }

.item-three {
  height: 1.5rem;
  font-size: 0.58rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #808080;
  width: 12rem;
  padding: 0.2rem 1rem;
}
.item-one {
  padding-right: 1rem;
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #1a1a1a;
}
.item-two {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ff0000;
  line-height: 0.93rem;
}
.button {
  width: 3.56rem;
  background: #02af74;
  border-radius: 1rem 0rem 0rem 1rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0.3rem 0rem 0.3rem 0.5rem;
}

.modelP {
  padding: 0.5rem 1rem;
}

.item-one {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eaedf0;
  padding: 0.5rem;
}
.item-one-left {
  display: flex;
  align-items: center;
}
.top-image {
  position: absolute;
  top: 1.6rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.85rem;
  color: #666666;
}
.image-one {
  position: absolute;
  top: 0.8rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.85rem;
  color: #666666;
}

.two-image {
  width: 1rem;
  height: 1rem;
}
.HR {
  height: 0.5rem;
  background-color: #f3f5f7;
}

.footP {
  /* position: absolute; */
  bottom: 0;
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-bottom {
  margin: 1rem;
}

.car-content {
  padding: 0rem 0.5rem 0.5rem 0.5rem;
}

.foot-right {
  display: flex;
}

.settle {
  background-color: #02af74;
  height: 100%;
  width: 5rem;
  text-align: center;
  font-size: 0.8rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: white;
  margin-left: 1rem;
}
</style>